<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>在线支付</p>
		</header>

		<!-- 订单信息部分：修复商家名称绑定（去掉多余的.data） -->
		<h3>订单信息：</h3>
		<div class="order-info">
			<p>
				{{orders.business?.businessName || '订单'}}
				<i class="fa fa-caret-down" @click="toggleDetails"></i>
			</p>
			<p>&#165;{{orders.orderTotal?.toFixed(2) || '0.00'}}</p>
		</div>

		<!-- 订单明细部分 -->
		<ul class="order-detailet" v-show="isShowDetails">
			<li v-for="item in orders.list || []" :key="item.id">
				<p>{{item.food?.foodName}} x {{item.quantity}}</p>
				<p>&#165;{{(item.food?.foodPrice * item.quantity || 0).toFixed(2)}}</p>
			</li>
			<li>
				<p>配送费</p>
				<p>&#165;{{orders.business?.deliveryPrice || '0.00'}}</p>
			</li>
			<li class="total-line">
				<p>合计</p>
				<p class="total-price">&#165;{{orders.orderTotal?.toFixed(2) || '0.00'}}</p>
			</li>
		</ul>

		<!-- 支付方式部分 -->
		<h3>选择支付方式：</h3>
		<ul class="payment-type">
			<li @click="selectPayment('wallet')" :class="{ 'selected': selectedPayment === 'wallet' }">
				<div class="wallet-payment">
					<img src="../assets/wallet-icon.svg" alt="电子钱包" class="wallet-icon" @error="handleWalletIconError">
					<span class="wallet-text">电子钱包</span>
				</div>
				<i class="fa fa-check-circle"></i>
			</li>
			<li @click="selectPayment('alipay')" :class="{ 'selected': selectedPayment === 'alipay' }">
				<img src="../assets/alipay.png" alt="支付宝支付">
				<i class="fa fa-check-circle"></i>
			</li>
			<li @click="selectPayment('wechat')" :class="{ 'selected': selectedPayment === 'wechat' }">
				<img src="../assets/wechat.png" alt="微信支付">
				<i class="fa fa-check-circle"></i>
			</li>
		</ul>

		<!-- 订单备注 -->
		<div class="order-notes">
			<textarea v-model="orderNotes" placeholder="请输入订单备注（选填）" maxlength="100"></textarea>
			<p class="note-count">{{orderNotes.length}}/100</p>
		</div>

		<!-- 支付按钮：添加loading状态，防止重复点击 -->
		<div class="payment-button">
			<button @click="confirmPayment">
				<span>确认支付</span>
			</button>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	export default {
		name: 'Payment',
		data() {
			return {
				orderId: this.$route.query.orderId, // 从路由获取订单ID
				orders: {
					business: {}, // 订单关联的商家信息
					list: [] // 订单商品列表
				},
				isShowDetails: false,
				selectedPayment: 'alipay', // 默认选中支付宝
				orderNotes: '',
				isProcessing: false // 支付处理中状态（防止重复点击）
			}
		},
		created() {
			const token = localStorage.getItem('id_token');
			if (!token) {
				this.$router.push('/login');
				return;
			}

			// 获取订单详情（修复：确保接口路径正确）
			this.$axios.get(`orders/${this.orderId}`, {
				headers: {
					'Authorization': `Bearer ${token}`
				}
			}).then(response => {
				const result = response.data;
				if (result.success && result.code === 200) {
					this.orders = result.data; // 赋值完整订单数据
				} else {
					alert('获取订单详情失败：' + (result.message || '未知错误'));
				}
			}).catch(error => {
				console.error('获取订单详情出错：', error);
				alert('获取订单信息失败，请重试');
			});
		},
		methods: {
			// 切换订单详情显示状态
			toggleDetails() {
				this.isShowDetails = !this.isShowDetails;
			},

			// 选择支付方式
			selectPayment(type) {
				this.selectedPayment = type;
			},

			// 处理钱包图标加载错误
			handleWalletIconError(event) {
				// 如果图片加载失败，使用FontAwesome图标作为后备
				const walletPayment = event.target.parentElement;
				if (walletPayment && walletPayment.classList.contains('wallet-payment')) {
					event.target.style.display = 'none';
					const icon = document.createElement('i');
					icon.className = 'fa fa-wallet wallet-fallback-icon';
					walletPayment.insertBefore(icon, walletPayment.firstChild);
				}
			},

			// 确认支付（核心修复：参数、token、路径、跳转）
			confirmPayment() {
				// 1. 防止重复点击
				if (this.isProcessing) return;
				this.isProcessing = true;

				// 2. 获取token并验证
				const token = localStorage.getItem('id_token');
				if (!token) {
					this.isProcessing = false;
					this.$router.push('/login');
					return;
				}

				// 3. 根据支付方式处理
				if (this.selectedPayment === 'wallet') {
					// 钱包支付：跳转到钱包支付确认页
					this.isProcessing = false;
					this.$router.push({
						path: '/walletPayment',
						query: { orderId: this.orderId }
					});
					return;
				}

				// 4. 其他支付方式：构造支付请求参数（含订单ID、状态、备注）
				const payData = {
					orderState: 1, // 1=已支付（匹配业务逻辑）
					notes: this.orderNotes // 订单备注（可选）
				};

				// 5. 发送PATCH请求（修复：路径为orders/{orderId}，修改指定订单）
				this.$axios.patch(`orders`, {
					id: this.orderId,
					orderState: 1
				}, {
					headers: {
						'Authorization': `Bearer ${token}`
					}
				}).then(response => {
					const result = response.data;
					// 6. 验证支付成功（按后端响应格式判断）
					if (result.data.orderState === 1) {
						alert('订单支付成功！');
						// 7. 支付成功后跳转到BusinessList（路径按实际路由调整，通常为'/businessList'）
						this.$router.push('/orderList');
					} else {
						alert('支付失败：' + (result.message || '订单状态更新异常'));
						this.isProcessing = false;
					}
				}).catch(error => {
					console.error('支付请求出错：', error);
					alert('支付时发生错误，请稍后重试');
					this.isProcessing = false; // 恢复按钮状态
				});
			}
		},
		components: {
			Footer
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		background-attachment: fixed;
		padding-bottom: 15vw;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		font-size: 4.8vw;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	.wrapper header::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
		animation: pulse 3s ease-in-out infinite;
	}

	@keyframes pulse {
		0%, 100% {
			transform: scale(1);
			opacity: 0.5;
		}
		50% {
			transform: scale(1.1);
			opacity: 0.8;
		}
	}

	.wrapper header p {
		position: relative;
		z-index: 1;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		font-weight: 600;
	}

	/****************** 订单信息部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 2vw;
		margin-bottom: 0;

		font-size: 4.5vw;
		font-weight: 600;
		color: #fff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
	}

	.wrapper h3::before {
		content: '';
		width: 4px;
		height: 4vw;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 2px;
		margin-right: 2vw;
	}

	.wrapper .order-info {
		box-sizing: border-box;
		padding: 4.5vw;
		font-size: 4vw;
		color: #666;
		background: #fff;
		margin: 0 3vw 3vw;
		border-radius: 3vw;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
		transition: transform 0.3s, box-shadow 0.3s;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-info:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
	}

	.wrapper .order-info p:first-child {
		display: flex;
		align-items: center;
		font-weight: 500;
	}

	.wrapper .order-info p:last-child {
		color: #e74c3c;
		font-weight: 700;
		font-size: 5vw;
		text-shadow: 0 1px 2px rgba(231, 76, 60, 0.2);
	}

	.wrapper .order-info .fa-caret-down {
		margin-left: 2vw;
		color: #999;
		transition: transform 0.3s;
		cursor: pointer;
	}

	.wrapper .order-info .fa-caret-down:hover {
		color: #667eea;
		transform: translateY(2px);
	}

	/****************** 订单明细部分 ******************/
	.wrapper .order-detailet {
		width: calc(100% - 6vw);
		background: #fff;
		margin: 0 3vw 3vw;
		padding: 0;
		list-style: none;
		border-radius: 3vw;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
		overflow: hidden;
		animation: slideDown 0.3s ease-out;
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.wrapper .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 3.5vw 4vw;
		transition: background-color 0.3s;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-detailet li:hover {
		background-color: #f8f9fa;
	}

	.wrapper .order-detailet li p {
		font-size: 3.5vw;
		color: #666;
		margin: 0;
		font-weight: 500;
	}

	.wrapper .order-detailet .total-line {
		border-top: 2px solid #e0e0e0;
		margin-top: 1vw;
		padding-top: 3.5vw;
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	}

	.wrapper .order-detailet .total-price {
		color: #e74c3c;
		font-weight: 700;
		font-size: 4.5vw;
		text-shadow: 0 1px 2px rgba(231, 76, 60, 0.2);
	}

	/****************** 支付方式部分 ******************/
	.wrapper .payment-type {
		width: calc(100% - 6vw);
		background: #fff;
		margin: 0 3vw 3vw;
		padding: 0;
		list-style: none;
		border-radius: 3vw;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
		overflow: hidden;
	}

	.wrapper .payment-type li {
		width: 100%;
		box-sizing: border-box;
		padding: 4.5vw 4vw;
		border-bottom: 1px solid #f0f0f0;
		cursor: pointer;
		transition: all 0.3s;
		position: relative;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .payment-type li:last-child {
		border-bottom: none;
	}

	.wrapper .payment-type li:hover {
		background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
		transform: translateX(4px);
	}

	.wrapper .payment-type li img {
		width: 33vw;
		height: 8.9vw;
		border-radius: 1vw;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s;
	}

	.wrapper .payment-type li:hover img {
		transform: scale(1.05);
	}

	.wrapper .payment-type li .wallet-payment {
		display: flex;
		align-items: center;
		width: 33vw;
		height: 8.9vw;
		transition: all 0.3s;
		gap: 2vw;
	}

	.wrapper .payment-type li:hover .wallet-payment {
		transform: scale(1.05);
	}

	.wrapper .payment-type li .wallet-payment .wallet-icon {
		width: 8.9vw;
		height: 8.9vw;
		object-fit: contain;
		border-radius: 1vw;
		box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
		transition: transform 0.3s;
		flex-shrink: 0;
	}

	.wrapper .payment-type li:hover .wallet-payment .wallet-icon {
		transform: scale(1.05);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
	}

	.wrapper .payment-type li .wallet-payment .wallet-fallback-icon {
		font-size: 6vw;
		color: #667eea;
		flex-shrink: 0;
		width: 8.9vw;
		height: 8.9vw;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
		border-radius: 1vw;
		box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
	}

	.wrapper .payment-type li .wallet-payment .wallet-text {
		font-size: 4.5vw;
		color: #333;
		font-weight: 600;
		white-space: nowrap;
	}

	.wrapper .payment-type li .fa-check-circle {
		font-size: 6vw;
		color: #52c41a;
		display: none;
		background: #fff;
		border-radius: 50%;
		padding: 1vw;
		box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
		transition: all 0.3s;
	}

	.wrapper .payment-type li.selected .fa-check-circle {
		display: block;
		animation: scaleIn 0.3s ease-out;
	}

	@keyframes scaleIn {
		from {
			transform: scale(0);
			opacity: 0;
		}
		to {
			transform: scale(1);
			opacity: 1;
		}
	}

	.wrapper .payment-type li.selected {
		background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
		border-left: 4px solid #52c41a;
	}

	/****************** 订单备注 ******************/
	.wrapper .order-notes {
		width: calc(100% - 6vw);
		box-sizing: border-box;
		padding: 4.5vw;
		background: #fff;
		margin: 0 3vw 3vw;
		border-radius: 3vw;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	}

	.wrapper .order-notes textarea {
		width: 100%;
		box-sizing: border-box;
		padding: 3.5vw;
		border: 2px solid #e0e0e0;
		border-radius: 2vw;
		min-height: 18vw;
		resize: none;
		font-size: 3.5vw;
		outline: none;
		background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
		transition: all 0.3s;
	}

	.wrapper .order-notes textarea:focus {
		border-color: #667eea;
		box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
		background: #fff;
	}

	.wrapper .order-notes textarea::placeholder {
		color: #ccc;
	}

	.wrapper .order-notes .note-count {
		text-align: right;
		font-size: 3vw;
		color: #999;
		margin: 1.5vw 0 0 0;
	}

	/****************** 支付按钮 ******************/
	.wrapper .payment-button {
		width: calc(100% - 6vw);
		box-sizing: border-box;
		padding: 0;
		margin: 0 3vw 15vw;
		position: sticky;
		bottom: 0;
		z-index: 10;
	}

	.wrapper .payment-button button {
		width: 100%;
		height: 13vw;
		border: none;
		outline: none;
		border-radius: 3vw;
		background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
		color: #fff;
		font-size: 4.5vw;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s;
		box-shadow: 0 4px 16px rgba(82, 196, 26, 0.3);
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wrapper .payment-button button::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		transition: left 0.5s;
	}

	.wrapper .payment-button button:hover::before {
		left: 100%;
	}

	.wrapper .payment-button button:hover:not(:disabled) {
		background: linear-gradient(135deg, #73d13d 0%, #52c41a 100%);
		transform: translateY(-2px);
		box-shadow: 0 6px 24px rgba(82, 196, 26, 0.4);
	}

	.wrapper .payment-button button:active:not(:disabled) {
		transform: translateY(0);
	}

	.wrapper .payment-button button:disabled {
		background: #ccc;
		cursor: not-allowed;
		box-shadow: none;
	}

	.wrapper .payment-button button span {
		position: relative;
		z-index: 1;
	}
</style>